<template>
  <div class="shop">
    <el-button-group>
      <el-button @click="changeStatus(1)">全部</el-button>
      <el-button @click="changeStatus(2)">已上架</el-button>
      <el-button @click="changeStatus(3)">已下架</el-button>
    </el-button-group>

    <div class="search">
      <div class="search_btn">
        <el-input class="input" v-model="form.keyword" placeholder="输入商品或小店名称搜索" clearable></el-input>
        <el-button type="primary" @click="searchShopMin">搜索</el-button>
      </div>
    </div>

    <el-table
      :data="tableData"
      class="explosive_table"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column label="图片" width="160">
        <template slot-scope="scope">
          <div>
            <img
              :key="scope.row.id"
              style="width:100px;"
              :src="scope.row.pic_url ? scope.row.pic_url : errorImg"
              alt
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          <p class="shop_title">{{scope.row.title}}</p>
          <!-- <p>{{scope.row.description}}</p> -->
        </template>
      </el-table-column>
      <el-table-column prop="shop_name" label="所属小店"></el-table-column>
      <el-table-column prop="price" label="商品售价/会员专享价" width='160'>
        <template slot-scope="scope">
          <p
            v-if="scope.row.sale_price && scope.row.vip_price"
          >{{scope.row.sale_price}}/{{scope.row.vip_price}}</p>
          <p v-if="scope.row.sale_price && !scope.row.vip_price">{{scope.row.sale_price}}/---</p>
          <p v-if="!scope.row.sale_price && scope.row.vip_price">---/{{scope.row.vip_price}}</p>
          <p v-if="!scope.row.sale_price && !scope.row.vip_price">---/---</p>
        </template>
      </el-table-column>
      <el-table-column prop="num" width="160" label="冻结数/剩余可用数">
        <template slot-scope="scope">
           <p
            v-if="scope.row.stock && scope.row.usable_stock"
          >{{scope.row.stock}}/{{scope.row.usable_stock}}</p>
          <p v-if="scope.row.stock && !scope.row.usable_stock">{{scope.row.stock}}/---</p>
          <p v-if="!scope.row.stock && scope.row.usable_stock">---/{{scope.row.usable_stock}}</p>
          <p v-if="!scope.row.stock && !scope.row.usable_stock">---/---</p>
          </template>
      </el-table-column>
      <!-- <el-table-column  width="140" label="会员折扣/红包抵扣">
       <template slot-scope="scope">
           <p
            v-if="scope.row.discount.discount && scope.row.discount.tlj"
          >{{scope.row.discount.discount}}%/{{scope.row.discount.tlj}}%</p>
          <p v-if="scope.row.discount.discount && !scope.row.discount.tlj">{{scope.row.discount.discount}}%/---</p>
          <p v-if="!scope.row.discount.discount && scope.row.discount.tlj">---/{{scope.row.discount.tlj}}%</p>
          <p v-if="!scope.row.discount.discount && !scope.row.discount.tlj">---/---</p>
          </template>
      </el-table-column> -->
      <el-table-column prop="red_packet_price_yuan" label="返红包数"></el-table-column>
      <el-table-column label="上架状态" width="120">
        <template slot-scope="scope">
          <el-switch v-if='scope.row.product_status ==1 || scope.row.product_status == 5'
            :key="scope.row.id"
            :active-value="1"
            :inactive-value="5"
            :value="scope.row.product_status"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch>
          <p class="status—desc" >{{scope.row.product_status_word}}</p>
          <!-- <p class="status—desc" v-if="scope.row.on_sale==5">已上架</p>
          <p class="status—desc" v-if="scope.row.on_sale==10">驳回</p>
          <p class="status—desc" v-if="scope.row.on_sale==15">已下架</p> -->
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="openShopMinDetail(scope.row.id)">查看</el-button>
          <el-button size="mini" type="danger" @click="deleteShopMin(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

    <jdialog title="商品信息" :visible.sync="isShowDetail" width="640px">
      <el-row class="goodsInfo_price">
        <el-col :span="3">商品图片:</el-col>
        <el-col :span="21">
          <uploadImg
            :canEdit="false"
            flieName="shopadministration_pic_list"
            :n="10"
            :oldImgs="img_url"
            @getFile="getFile"
          ></uploadImg>
          <div class="img_main" v-show="img_url.length">主图</div>
        </el-col>
      </el-row>
      <el-row class="goodsInfo_price">
        <el-col :span="3">商品名称:</el-col>
        <el-col :span="8">
          <el-input :disabled="true" placeholder v-model="productDetail.title"></el-input>
        </el-col>
      </el-row>

      <el-row class="goodsInfo_price">
        <el-col :span="3">商品原价:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.price"
            @change="changeGoodsPrice"
            :min="0"
            :disabled="true"
          ></el-input-number>
        </el-col>

        <el-col :span="4">会员专享售价:</el-col>
        <el-col :span="8">
          <el-input-number v-model="productDetail.sale_price" @change="changeGoodsPrice" :min="0"></el-input-number>
        </el-col>
      </el-row>

      <el-row class="goodsInfo_price">
        <el-col :span="3">商品库存:</el-col>
        <el-col :span="9">
          <el-input-number v-model="productDetail.stock" @change="changeGoodsStock" :min="1"></el-input-number>
        </el-col>
        <el-col :span="3">冻结库存:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="productDetail.usable_stock"
            @change="changeGoodsStock"
            :min="1"
            :disabled="true"
          ></el-input-number>
        </el-col>
      </el-row>

      <el-row class="goodsInfo_price">
        <el-col :span="3">红包抵扣:</el-col>
        <el-col :span="9">
          <el-input-number v-model="tlj"  :precision="2" :step="0.1" :max="1" :disabled="true"></el-input-number>
        </el-col>
        <el-col :span="3">会员折扣:</el-col>
        <el-col :span="9">
          <el-input-number
            v-model="discount"
            :precision="2" :step="0.1" :max="1"
            :disabled="true"
          ></el-input-number>
        </el-col>
      </el-row>
      <el-row class="goodsInfo_price">
        <el-col :span="4">用户购买限制:</el-col>
        <el-col :span="8">
          <el-input-number
            v-model="productDetail.limit_per_num"
            @change="changeGoodsStock"
            :min="1"
            :max="10000"
          ></el-input-number>
        </el-col>
        <el-col :span="3">返红包数:</el-col>
        <el-col :span="8">
          <el-input-number
            v-model="productDetail.red_packet_price_yuan"
            @change="changeGoodsStock"
            :min="0"
            :max="10000"
          ></el-input-number>
        </el-col>
      </el-row>
      <el-row class="goodsInfo_price">
        <el-col :span="3">商品简介:</el-col>
        <el-col :span="9">
          <el-input
            :disabled="true"
            placeholder
            v-model="productDetail.description"
            type="textarea"
            auotosize
          ></el-input>
        </el-col>
      </el-row>

      <div class="dialog-footer">
        <el-button size="mini" @click="isShowDetail = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitGoodsInfo">确 定</el-button>
      </div>
    </jdialog>
  </div>
</template>

<script>
// import errorImg from "@/assets/images/error_img.png";
// import uploadImg from "@/components/uploadImg";
// import {
//   productVipList,
//   productVipDown,
//   productVipUp,
//   productVipDelete,
//   productVipDetail,
//   productVipEdit
// } from "@/api/goods";
import {vipProductList,vipProductOffLine,vipProductRemove} from "@/api/store"
export default {
  components: {
    // uploadImg
  },
  mounted() {
    this.getExplosiveProductListData();
  },
  data() {
    return {
      //展示详情
      isShowDetail: false,
      errorImg:'',
      form: {
        keyword: "",
        on_sale: "",
        partnerId:0,
        sellerId:0,
        productName:'',
        sellerName:'',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      //商品详情
      productDetail: {},
      discount:'',
      tlj:'',
      //图片列表
      img_url: []
    };
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    changeStatus(e) {
      if (e === 1) {
        this.form.on_sale = "";
      } else if (e === 2) {
        this.form.on_sale = "5";
      } else {
        this.form.on_sale = "15";
      }
      //重新获取小店商品管理列表
      this.getExplosiveProductListData();
    },
    //获取商品列表
    async getExplosiveProductListData() {
      let res = await vipProductList(this.form);
      console.log(res);
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    //根据关键词重新获取小店
    searchShopMin() {
      this.getExplosiveProductListData();
    },
    pageChange(page) {
      this.form.pageNum = page;
      this.getExplosiveProductListData();
    },

    isUseActivityChange(id, e) {
      console.log(e+'e:')
      if (e === 5) {
        //下架
        this.getDownProductData(id);
      } else {
        //上架
        this.getUpProductData(id);
      }
    },
    //上架商品
    async getUpProductData(cid) {
      let res = await productVipUp({ id: cid });
      if (res.code === 10000) {
        this.$message.success("上架商品成功");
        this.getExplosiveProductListData();
      } else {
        this.$message.error(res.message);
      }
    },
    //下架商品
    async getDownProductData(cid) {
      let res = await vipProductOffLine({ id: cid });
      if (res.code === 200) {
        this.$message.success("下架商品成功");
        this.getExplosiveProductListData();
      } else {
        this.$message.error(res.message);
      }
    },
    //删除商品
    async getDeleteProductData(cid) {
      let res = await vipProductRemove(cid);
      if (res.code === 200) {
        this.$message.success("删除商品成功");
        this.getExplosiveProductListData();
      } else {
        this.$message.error(res.message);
      }
    },
    //查看详情
    openShopMinDetail(id) {
      this.isShowDetail = true;
      this.getproductDetailExplosiveInfoData(id);
    },

    //删除详情
    deleteShopMin(id) {
      this.$confirm("确定删除?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //移除小店
        this.getDeleteProductData(id);
      });
    },

    //商品详情
    async getproductDetailExplosiveInfoData(cid) {
      let res = await productVipDetail({ id: cid });

      this.productDetail = res.data;
      this.discount = res.data.discount.discount/100
      this.tlj  = res.data.discount.tlj/100
      this.img_url = res.data.pic_url
        ? res.data.pic_url.map(obj => obj.product_pic_url)
        : [];
        console.log(this.tlj)
    },

    //获取商品图片
    getFile(file) {
      if (
        file.files &&
        file.files.length &&
        file.name == "shopadministration_pic_list"
      ) {
        this.img_url = file.files.map(obj => obj.url);
      }
      console.log(this.img_url);
    },
    //改变商品原价
    changeGoodsPrice() {},

    //改变商品库存
    changeGoodsStock() {},

    //修改商品点击确定
    submitGoodsInfo() {
      this.getEditProductData();
    },

    //编辑商品
    async getEditProductData() {
      var form = {
        id: this.productDetail.id,
        limit_per_num: this.productDetail.limit_per_num,
        sale_price: this.productDetail.sale_price,
        stock: this.productDetail.stock,
        red_packet_price: this.productDetail.red_packet_price_yuan
      };
      console.log(form);
      let res = await productVipEdit(form);
      if (res.code === 10000) {
        this.$message.success("编辑成功");
        this.getExplosiveProductListData();
      } else {
        this.$message.error(res.message);
      }
      this.isShowDetail = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;

  .search {
    float: right;
    .input {
      width: 200px;
    }
  }
  .explosive_table {
    margin-top: 20px;
  }
  .shop_title {
    font-weight: 700;
  }
  .goodsInfo_price {
    margin-top: 20px;
    padding: 0 20px;
  }

  .pagination {
    float: right;
  }
  .status—desc {
    display: inline;
    margin-left: 5px;
  }

  .img_main {
    color: #ffffff;
    background-color: #f4222d;
    width: 60px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 10%;
    margin-left: 30px;
    // z-index: !important;
  }
  .dialog-footer {
    margin: 20px 0;
    text-align: center;
  }
}
</style>
